import 'package:flutter/material.dart';

class AnimatedCrossFadeApi extends StatefulWidget {
  AnimatedCrossFadeApi({Key key}) : super(key: key);

  @override
  _AnimatedCrossFadeApiState createState() => _AnimatedCrossFadeApiState();
}

class _AnimatedCrossFadeApiState extends State<AnimatedCrossFadeApi> {
  bool _showFirst = false;
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Container(
          child: Center(
              child: AnimatedCrossFade(
            duration: Duration(seconds: 2),
            crossFadeState: _showFirst
                ? CrossFadeState.showFirst
                : CrossFadeState.showSecond,
            firstChild: Container(
                height: 150,
                width: 150,
                alignment: Alignment.center,
                decoration:
                    BoxDecoration(shape: BoxShape.circle, color: Colors.blue),
                child:
                    Text("first child", style: TextStyle(color: Colors.white))),
            secondChild: Container(
              height: 150,
              width: 150,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  shape: BoxShape.rectangle,
                  color: Colors.orange,
                  borderRadius: BorderRadius.circular(20)),
              child: Text(
                'second child',
                style: TextStyle(color: Colors.white),
              ),
            ),
          )),
        ),
        RaisedButton(
            onPressed: () {
              setState(() {
                _showFirst = !_showFirst;
              });
            },
            child: Text("切换"))
      ],
    );
  }
}
